<template>
	<div class="adim">
		<el-container>
			<el-header class="el-header">
				<el-row>
					<el-col :span="1">
					</el-col>
					<el-col :span="1">

						<div class="demo-basic--circle">
							<div class="block">
								<el-avatar :size="45" :src="circleUrl"></el-avatar>
							</div>
						</div>
					</el-col>
					<el-col :span="14" style="text-align:left;">3</el-col>
					<el-col :span="4">
						<div class="demo-basic--circle">
							<div class="block">
								<el-avatar :size="45" :src="circleUrl"></el-avatar>
							</div>
						</div>
					</el-col>
					<el-col :span="2">
						<el-button icon="el-icon-switch-button" circle></el-button>
					</el-col>
					<el-col :span="2">
						<el-button icon="el-icon-s-home" circle></el-button>
					</el-col>
				</el-row>
			</el-header>
			<el-container>
				<el-aside width="200px">
					<!-- 树状图 -->

					<el-tree :data="data" :props="defaultProps" class="tree" @node-click="handleNodeClick" node-key="RUID"
					 :default-expanded-keys="sider_default_list"></el-tree>

				</el-aside>
				<el-main>
					<div>
						<el-row>
							<el-col :span="19">
								<el-input style="width: 400px" placeholder="请输入搜索内容......" v-model="searchinput"></el-input>
								<el-button type="primary" icon="el-icon-search" @click="searchByInput">搜索</el-button>
							</el-col>
							<el-col :span="2">
								<el-button type="primary" icon="el-icon-search" @click="showinsertCategory">新增</el-button>
							</el-col>
							<el-col :span="3">
								<el-button type="primary" icon="el-icon-search" @click="batchDelete">批量删除</el-button>
							</el-col>
						</el-row>
					</div>

					<el-table :data="tableData" style="width: 100%" ref="multipleTable">
						<el-table-column prop="ruid" label="ID" width="200">
						</el-table-column>
						<el-table-column type="selection" width="100">
						</el-table-column>
						<el-table-column prop="name" label="分类名称">
						</el-table-column>
						<el-table-column label="操作" width="200">
							<template slot-scope="scope">
								<el-button size="small" @click="showupdateCategory(scope.$index, scope.row)">编辑</el-button>
								<el-button type="danger" size="small" @click="delClick(scope.index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>






					<div class="block pagination-loc">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPages"
						 :page-sizes="[5, 10, 20, 50]" :page-size=PageSize layout="sizes, prev, pager, next" :total=totalsize>
						</el-pagination>
					</div>

					<!-- 类别设置 -->
					<el-dialog title="类别设置" :visible.sync="dialogFormVisible" :close-on-click-modal=false :close-on-press-escape=false
					 :show-close=false>
						<el-form :model="form" :rules="rules" ref="form">
							<el-form-item label="上级分类" :label-width="formLabelWidth" prop="valueId">
								<SelectTree :props="props" :options="optionData" :value="form.valueId" :clearable="isClearable" :accordion="isAccordion"
								 @getValue="getValue($event)" style="width: 100%;" />
							</el-form-item>
							<el-form-item label="分类名称" :label-width="formLabelWidth" prop="name">
								<el-input v-model="form.name" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="页面" :label-width="formLabelWidth">
								<SelectTree :props="props" :options="optionpagenodeData" :value="form.valueId_pageNode" :clearable="isClearable"
								 :accordion="isAccordion" @getValue="getValue($event)" style="width: 100%;" />
							</el-form-item>
							<el-form-item label="显示顺序" :label-width="formLabelWidth" prop="orderno">
								<el-input v-model="form.orderno" autocomplete="off"></el-input>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="cancelUpdateCategory">取 消</el-button>
							<el-button type="primary" @click="sureCategory">确 定</el-button>
						</div>
					</el-dialog>
					<!-- 类别设置 -->

					<!-- 删除 -->
					<el-dialog title="信息" :visible.sync="deleteVisible" width="30%" :close-on-click-modal=false :close-on-press-escape=false
					 :show-close=false>
						<span>确认是否删除当前分类？</span>
						<span slot="footer" class="dialog-footer">
							<el-button @click="delCancel()">取 消</el-button>
							<el-button type="primary" @click="delCategory">确 定</el-button>
						</span>
					</el-dialog>
					<!-- 删除 -->

				</el-main>
			</el-container>
		</el-container>
	</div>
</template>
<script>
	import SelectTree from "../../components/treeSelect.vue";
	export default {
		name: "Adim",
		data() {
			return {
				sider_default_list: [],
				isClearable: true, // 可清空（可选）
				isAccordion: true, // 可收起（可选）
				valueId: "", // 初始ID（可选）
				valueId_pageNode: "",
				props: { // 配置项（必选）
					value: 'RUID',
					label: 'label',
					children: 'children',
				},
				// 选项列表（必选）
				list: [],
				flag: false,
				totalsize: 0, //总条数
				currentPages: 1, //当前页
				PageSize: 10, //当前页条数
				searchinput: "", //搜索框的内容
				insorup: false, //判断是新增还是修改(true为新增,false为修改)
				dialogFormVisible: false, //编辑|新增 模态框
				check_sider_data: {},
				deleteVisible: false,
				supcategory_value: [],
				page_value: [],
				options: [],
				form: {
					name: '',
					orderno: '',
					valueId: '',
					valueId_pageNode: '',
				},
				formLabelWidth: '120px',
				circleUrl: "",
				input3: "",
				data: [],
				pagenodedata: [],
				tableData: [],
				multipleSelection: [],
				defaultProps: {
					children: "children",
					label: "label",
				},
				del_row:{},
				rules: {
					name: [{
						required: true,
						message: '请输入分类名称',
						trigger: 'blur'
					}],
					orderno: [{
						required: true,
						message: '请输入显示顺序',
						trigger: 'blur'
					}],
					valueId: [{
						required: true,
						message: '请选择上级分类',
						trigger: 'change'
					}],
				},
			};
		},
		components: {
			SelectTree
		},
		onLoad() {
			this.trees()
		},
		computed: {
			/* 转树形数据 */
			optionData() {
				let cloneData = JSON.parse(JSON.stringify(this.data)) // 对源数据深度克隆
				return cloneData;
				// return  cloneData.filter(father=>{                      // 循环所有项，并添加children属性
				//     let branchArr = cloneData.filter(child=>father.id == child.parentId);       // 返回每一项的子级数组
				//     branchArr.length>0 ? father.children=branchArr : ''   //给父级添加一个children属性，并赋值
				//     return father.parentId==0;      //返回第一层
				// });
			},
			optionpagenodeData() {
				let cloneData = JSON.parse(JSON.stringify(this.pagenodedata)) // 对源数据深度克隆
				return cloneData;
			}
		},
		methods: {
			getValue(value) {
				this.form.valueId = value
				console.log(this.form.valueId);
			},
			getPageNodeData() {
				this.$ajax(
					this.apiList.tree, {
						"type": "pageinfo6",
						"codeflag": "1",
						"deep": -1,
						"rootnode": {
							"RUID": "pagenode",
							"exist": "0",
							"show": "1",
							"propvalue": {
								"name": "页面管理根节点",
								"type": "group"
							}
						},
						"filter": [],
						"field": "RUID,name,type,parentid,orderno",
						"key": {
							"name": "label"
						},
						"order": [{
							"fieldname": "orderno",
							"type": "A"
						}]
					},
					"POST").then(res => {
					if (res.cxajaxrc == "0") {
						this.pagenodedata = res.nodes;
					} else {
						this.$message.error("页面节点:检索资料时发生错误");
					}

				});
			},
			getRightList(data) {
				this.$ajax(
					this.apiList.category_content_list, {
						"pageno": this.currentPages - 1,
						"pagesize": this.PageSize,
						"type": "column",
						"codeflag": "1",
						"filter": [{
							"fieldname": "parentid",
							"word": data.RUID
						}],
						"field": "RUID,name,type,parentid,orderno",
						"key": {
							"name": "label"
						},
						"order": [{
							"fieldname": "orderno",
							"type": "A"
						}]
					},
					"POST"
				).then(res => {
					if (res.cxajaxrc == "0") {
						this.totalsize = res.recordcount;
						let list = [];
						if (res.recordcount != 0) {
							for (var i = 0; i < res.recordlist.length; i++) {
								var record = {
									"ruid": res.recordlist[i].RUID,
									"name": res.recordlist[i].name,
									"orderno": res.recordlist[i].orderno,
									"parentid": res.recordlist[i].parentid
								};
								list.push(record);
							}
							this.tableData = list;
						} else {
							this.tableData = [];
						}
					} else {
						this.$message.error("表格数据:检索资料时发生错误");
					}
				});
			},
			trees() {
				this.$ajax(
					this.apiList.tree, {
						"type": "column",
						"codeflag": "1",
						"rootnode": {
							"RUID": "182693850009090bd3"
						},
						"filter": [],
						"field": "RUID,name,type,parentid,orderno",
						"key": {
							"name": "label"
						},
						"order": [{
							"fieldname": "orderno",
							"type": "A"
						}]
					},
					"POST"
				).then(res => {
					if (res.cxajaxrc == "0") {
						this.data = res.nodes;
						this.sider_default_list.push(res.nodes[1].RUID); //设置左侧Sider默认选中打开
						this.check_sider_data = res.nodes[1];
						this.getRightList(res.nodes[1]); //左侧选中,右侧初始化展示
					} else {
						this.$message.error("树目录:检索资料时发生错误");
					}
				})
			},
			searchByInput() { //根据搜索Input框输入的内容搜索
				if (this.searchinput != null && this.searchinput != "") {
					console.log("搜索");
					this.searchinput = "";
				} else {
					this.$message.error("请输入搜索内容");
				}
			},
			batchDelete() { //批量删除
				var list = this.$refs.multipleTable.selection; //获取table中所有选中的行数据
				console.log(list);
				if(list.length==0){
					this.$message.warning("请选择需要删除的项");
				}
			},
			insertCategory() { //类别设置修改
				console.log("新增");
			},
			showinsertCategory() { //点击新增事件
				this.dialogFormVisible = true;
				this.getPageNodeData();
				this.insorup = true;
			},
			sureCategory() {
				if (this.insorup) {
					this.insertCategory(); //新增 
				} else {
					this.updateCategory(); //修改
				}
			},
			updateCategory() { //类别设置修改
				console.log("修改");
			},
			showupdateCategory(index, row) { //点击编辑事件
				this.form.name = row.name;
				this.form.orderno = row.orderno;
				this.form.valueId = row.parentid; //将当前选项的parentid给valueId
				this.getPageNodeData();
				this.dialogFormVisible = true;
				this.insorup = false;
			},
			delClick(index, row) {
				this.del_row = row;	//要删除项的数据
				this.deleteVisible = true;
			},
			delCategory() {
				console.log("删除");
			},
			handleChange(label) { //上级分类 级联选择Change事件
				label = this.$refs.cascaderAddr.getCheckedNodes()[0].pathLabels;
				console.log(this.$refs.cascaderAddr.getCheckedNodes()[0].pathLabels);
			},
			handleChange1(value) { //上级分类 级联选择Change事件
				console.log(value);
			},
			handleNodeClick(data) {
				this.check_sider_data = data;
				this.getRightList(data);
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach((row) => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleSizeChange(val) {
				this.PageSize = val;
				this.currentPages = 1;
				this.getRightList(this.check_sider_data);
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPages = val;
				this.getRightList(this.check_sider_data);
				console.log(`当前页: ${val}`);
			},
			cancelUpdateCategory() {
				this.dialogFormVisible = false;
				this.form.name = "";
				this.form.orderno = "";
				this.form.valueId = "";
				this.form.valueId_pageNode = "";
			},
			delCancel() {
				this.deleteVisible = false;
			},
		},
	};
</script>
<style lang='scss' scoped>
	.el-header {
		border: 1px solid #eee;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		border: 1px solid #eee;
		padding: 20upx;
		box-sizing: border-box;
	}

	.el-tree {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.el-aside:first-child {
		border-top: none;
	}

	.el-main {
		border: 1px solid #eee;
	}

	.pagination-loc {
		margin-top: 10px;
		text-align: center;
	}
</style>
